<template>
  <div class="map-container">
    <div class="menu-left">
      <div class="left-head-container">
        <weather />
        <div class="equipment-box">
          <div class="content">
            <div class="item-box" v-for="item, index in equipmentData" :key="index">
              <img :src="item.img">
              <div class="item-content">
                <div>{{ item.desc }}</div>
                <div>{{ item.total }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="left-head-container" style="margin-top: 16px;">
        <div class="title-box" style="margin:8px 20px 0 px">
          <div class="title-content">
            <div>服务响应</div>
            <div>asdadsa</div>
          </div>
          <Select class="selector">
            <Option v-for="(item, index) in selectorData" :value="item.value" :key="index">{{ item }}</Option>
          </Select>
        </div>
        <div class="bottom-chart">
          <div class="each-chart" ref="echart1"></div>
          <div class="bottom-chart-content">
            <div class="item">
              <div class="line">
                <span></span>
                <span></span>
              </div>
              <div class="title">已处理</div>
              <div class="num">841</div>
            </div>
          </div>
          <div class="bottom-chart-content">
            <div class="item">
              <div class="line">
                <span style="background-color:#3Bdd68 ;"></span>
                <span style="background-color:rgba(59,221,104,0.26)"></span>
              </div>
              <div class="title">没处理</div>
              <div class="num">263</div>
            </div>
          </div>
        </div>
        <div class="bottom-title">
          <img :src="getImg('title-icon.png')">
          近七日服务频次
        </div>
        <div style="width:380px;height: 150px;" ref="echart2"></div>
      </div>
    </div>
    <div class="menu-right">
      <div class="right-head-container">
        <div class="title-box">
          <div class="title-content">
            <div>广电管家</div>
            <div>FGHJSDFJKL</div>
          </div>
        </div>
        <div class="right-head-charts">
          <Tree :data="baseData"></Tree>
        </div>

      </div>
    </div>
    <serve :menuTopData="menuTopData" :menuBottomLeftData="menuBottomLeftData" unit='处' />
  </div>
</template>

<script setup>
import { ref, reactive, computed, getCurrentInstance, onMounted, nextTick, onUnmounted } from 'vue'
import { useData } from "@/utils/useData.js"
const { getImg, weather, echarts, serve, map, timer, pieActive, store } = useData()
const { proxy } = getCurrentInstance()
//点坐标和图标的数据
const pointList = reactive([
  /*龙泉驿区政府 */
  {
    location: '龙泉驿区',
    lngLat: [104.27536, 30.556808],
    img: 'yyt-image.png',
    phone: '15394612646',
    specificLocaltion: '四川省成都市龙泉驿区',
  },

  /* 龙泉街道办事处 */
  {
    location: '龙泉街道办',
    lngLat: [104.265402, 30.562251],
    type: 1,
    img: 'yyt-image.png',
    phone: '15394613646',
    specificLocaltion: '四川省成都市龙泉街道办事处',
  },

  /* 洛带古镇 */
  {
    location: '洛带古镇',
    lngLat: [104.328033, 30.635452],
    type: 0,
    img: 'yyt-image.png',
    phone: '15395613646',
    specificLocaltion: '洛带古镇',
  },
  /* 十陵镇 */
  {
    location: '十陵镇',
    lngLat: [104.172438, 30.645829],
    type: 1,
    img: 'yyt-image.png',
    phone: '15294613646',
    specificLocaltion: '四川省成都市十陵镇',
  }

])

const icons = reactive({
  marker: "five-star.png",
  yydtIcon: "yydt-icon.png",
  fwwdIcon: "fwwd-icon-map.png"
})

//网点数据
const equipmentData = reactive([
  {
    img: getImg('yyt-icon-menu.png'),
    desc: '营业厅数',
    total: 9,
  },
  {
    img: getImg('fwwd-icon-menu.png'),
    desc: '服务网点',
    total: 315,
  },
  {
    img: getImg('gfdbd.png'),
    desc: '公服代办点',
    total: 278,
  },
  {
    img: getImg('gdgj.png'),
    desc: '广电管家',
    total: 107,
  },
  {
    img: getImg('fwxz.png'),
    desc: '服务乡镇数',
    total: 21,
  },
  {
    img: getImg('fwc.png'),
    desc: '服务村数',
    total: 315,
  },
  {
    img: getImg('fwgz.png'),
    desc: '服务工作员',
    total: 128,
  },
  {
    img: getImg('dy.png'),
    desc: '党员人数',
    total: 50,
  },
])

//下拉框数据
const selectorData = reactive(['全部', '当日', '近30天', '近90天', '近一年'])

//街道数据
const baseData = reactive([{
  expand: true,
  title: '龙泉驿区',
  children: [
    {
      title: '龙泉街道',
      expand: false,
      children: [
        {
          title: '百工堰社区',
          children: [
            {
              title: '王文'
            },
            {
              title: '林山'
            },
            {
              title: '文华'
            },

          ]
        },
        {
          title: '星光社区',
        }
      ]
    },
    {
      title: '大面街道',
      expand: false,
    },
    {
      title: '十陵街道',
      expand: false,
    },
    {
      title: '同安街道',
      expand: false,
    },
    {
      title: '洛带镇',
      expand: false,
    },
    {
      title: '洪安镇',
      expand: false,
    },
    {
      title: '山泉镇',
      expand: false,
    }
  ]
}])


//网点数据
const menuTopData = reactive([
  {
    img: getImg('yyt.png'),
    title: '营业厅数',
    num: 9,
  },
  {
    img: getImg('gfwd.png'),
    title: '镇级服务网点数',
    num: 131,
  },
  {
    img: getImg('bsc.png'),
    title: '村级服务代办点',
    num: 641,
  },
])
const menuBottomLeftData = reactive([
  {
    img: getImg('yydt-icon.png'),
    title: '营业大厅',
  },
  {
    img: getImg('fwwd-icon-map.png'),
    title: '服务网点',
  },
])

//点标记方法
const addPoint = () => {
  let content = ""
  //点坐标数组
  let maker_arr = []
  pointList.forEach(point => {
    if (point.type) {
      content =
        `<div><img style="width: 42px;height: 58px" src="${getImg(icons.yydtIcon)}"/></div>`;
    } else {
      content =
        `<div><img style="width: 42px;height: 58px" src="${getImg(icons.fwwdIcon)}"/></div>`;
    }
    if (point.location === '龙泉驿区') {
      content =
        `<div><img src="${getImg(icons.marker)}"/></div>`;
    }
    //点坐标对象
    let marker = new AMap.Marker({
      map: map.value,
      position: point.lngLat,
      content: content,
      extData: point
    })
    //保存当前页面点坐标信息
    maker_arr.push(marker)
    //点击事件
    marker.on('click', (e) => {
      console.log(e, 'ee');
      //展示框信息
      initInfoWindow(e.target)
    })

  })
  //保存点坐标数组
  store.commit("SETMAKER", maker_arr)

}

//信息窗口方法
const initInfoWindow = (marker) => {
  let extData = marker.getExtData()
  console.log(extData, 'eeexxx');
  let content = ` <div class="model">
                  <img class="pointLine" src="${getImg('pointLine.png')}"/>
            <div class="button" onclick="closeWindow()">
                <img src="${getImg('close-icon.png')}"/>
            </div>
            <div style="margin: 15px 10px">
                <div class="title">${extData.location}${extData.type ? '营业大厅' : '服务网点'}</div>
            </div>
            <img class="image" src="${getImg(extData.img)}"/>
            <div class="location-text">
                <div>网点位置：<span>${extData.specificLocaltion}</span></div>
                <div>联系电话：<span>${extData.phone}</span></div>
            </div>
        </div>`
  let infoWindow = new AMap.InfoWindow({
    isCustom: true,
    content: content,
    //鼠标点击地图后关闭
    closeWhenClickMap: true,
    autoMove: true,
    //偏移量
    offset: new AMap.Pixel(400, -172)

  })
  //保存信息窗口
  store.commit("SETINFOWINDOW", infoWindow)
  //启动信息窗口 传入地图对象和位置
  infoWindow.open(map.value, marker.getPosition())
}

//图表方法
const initEchart1 = () => {
  let value = parseInt(100 * Math.random());
  let option = {
    title: {
      text: '{a|' + value + '}{c|%}',
      left: 'center',
      top: 'center',
      textStyle: {
        rich: {
          a: {
            fontSize: 20,
            color: '#29EEF3'
          },

          c: {
            fontSize: 20,
            color: '#ffffff',
          }
        }
      }
    },

    series: [
      /** 俩饼 */
      {
        name: '',
        type: 'pie',
        radius: ['72%', '66%'],
        silent: true,
        z: 0,
        zlevel: 0,
        label: {
          show: false
        },
        data: [{
          value: 1,
          name: "",
          itemStyle: {
            normal: {
              color: "#64dd3b"
            }
          }
        },
        {
          value: 1,
          name: "",
          itemStyle: {
            normal: {
              color: "#173164"
            }
          }
        }
        ]
      },
      {
        name: '',
        type: 'pie',
        radius: ['61%', '35%'],
        silent: true,
        startAngle: 270,
        z: 0,
        zlevel: 0,
        label: {
          show: false
        },
        data: [{
          value: value,
          name: "",
          itemStyle: {
            normal: {
              color: { // 完成的圆环的颜色
                colorStops: [{
                  offset: 0,
                  color: '#00EDF3' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#646CF9' // 100% 处的颜色
                }]
              },
            }
          }
        },
        {
          value: 100 - value,
          name: "",
          itemStyle: {
            normal: {
              color: "#173164"
            }
          }
        }
        ]
      },

    ]
  };



  let chart = proxy.$refs['echart1'];
  let myChart = echarts.init(chart);
  myChart.setOption(option);
}

const initEchart2 = () => {
  let option = {
    tooltip: {
      show: true
    },
    grid: {
      top: '6%',
      left: '1%',
      right: '1%',
      bottom: '8%',
      containLabel: true,
    },
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#233e64'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        color: '#6a9cd5',
        margin: 15,
      },
      axisTick: { show: false, },
      data: ['11', '12', '13', '14', '15', '16', '17'],
    }],
    yAxis: [{
      type: 'value',
      splitNumber: 7,
      splitLine: {
        lineStyle: {
          color: '#233e64'
        }
      },
      axisLine: { show: false, },
      axisLabel: {
        margin: 20,
        color: '#6a9cd5',
      },
      axisTick: { show: false, },
    }],
    series: [{
      name: '服务频次',
      type: 'line',
      symbolSize: 0,
      lineStyle: {
        normal: {
          color: "#3deaff"   // 线条颜色
        }
      },
      areaStyle: { //区域填充样式
        normal: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(61,234,255, 0.9)' },
              { offset: 0.7, color: 'rgba(61,234,255, 0)' },
            ]
          }
        }
      },
      data: [90, 105, 84, 125, 110, 92, 98]
    }]
  };
  let chart1 = echarts.init(proxy.$refs["echart2"]);
  chart1.setOption(option);
  pieActive(chart1, option)
}

//初始化方法
const init = () => {
  addPoint()
  initEchart1()
  initEchart2()
}

onMounted(() => {
  nextTick(() => {
    init()
  })
})

onUnmounted(() => {
  clearInterval(timer)
  store.dispatch('resetMap')
})
</script>

<style lang="less" scoped>
.menu-left {
  position: absolute;
  top: 94px;
  left: 20px;
  height: 970px;
  width: 400px;
  margin-right: 16px;
  display: inline-block;

  .left-head-container {
    border-radius: 8px;
    background-color: #11387052;
    overflow: hidden;

    .equipment-box {
      margin: 0px 20px 20px 20px;

      .content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .item-box {
          margin: 10px;
          width: 40%;
          display: flex;

          .item-content {
            margin-left: 5px;

            div:nth-child(1) {
              font-family: 'PingFang SC';
              font-style: normal;
              font-weight: 400;
              font-size: 14px;
              line-height: 20px;
              color: #FFFFFF;
            }

            div:nth-child(2) {
              font-family: 'Furore';
              font-style: normal;
              font-weight: 400;
              font-size: 36px;
              line-height: 41px;
              color: #F2F6FA;
              margin: 5px 0;
            }
          }

          img {
            width: 66px;
            height: 66px;
          }
        }
      }

    }

    .bottom-title {
      text-align: left;
      margin: 0px 20px 16px 20px;

      img {
        margin-right: 5px;
      }
    }
  }
}

.bottom-chart {
  display: flex;
  align-items: center;
  justify-content: space-around;

  .each-chart {
    width: 150px;
    height: 150px;
  }

  .bottom-chart-content {
    .item {
      .line {
        display: block;

        span:nth-child(1) {
          display: inline-block;
          width: 24px;
          height: 4px;
          border-radius: 4px;
          background-color: #01CEFF;
        }

        span:nth-child(2) {
          display: inline-block;

          width: 64px;
          height: 4px;
          border-radius: 4px;
          background-color: #01CEFF29;
        }
      }

      .title {
        font-size: 14px;
        line-height: 20px;
      }

      .num {
        font-family: 'Furore';
        font-style: normal;
        font-weight: 400;
        font-size: 32px;
        line-height: 37px;
        color: #FFFFFF;
      }
    }
  }
}

.menu-right {
  position: absolute;
  top: 94px;
  right: 20px;
  height: 970px;
  display: inline-block;
  width: 400px;

  .right-head-container {
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-color: #11387052;

    .right-head-charts {
      display: flex;
      align-items: center;

      :deep(.ivu-tree-title) {
        margin: 5px;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 700;
        font-size: 18px;
        line-height: 20px;
        color: #FFFFFF;

        &:hover {
          background-color: #2c3e50;
        }
      }

      :deep(.ivu-tree-title-selected) {
        background-color: unset;
      }
    }
  }

}
</style>
